{% extends 'base.html'%}
{% load staticfiles %}
{%load i18n%}
{% load tz %}
{% get_current_language as LANGUAGE_CODE %}
{%block title%}{%trans 'Log list' %}{%endblock%}
{% block css %}
<link rel="stylesheet" href="{% static 'plugins/bootstrap-select/css/bootstrap-select.css' %} ">
<link rel="stylesheet" href="{% static 'plugins/json-forms/css/brutusin-json-forms.css' %} ">
<!-- DataTables css -->
<link rel="stylesheet" href="{% static "plugins/datatables/dataTables.bootstrap.css" %}">
<link rel="stylesheet" href="{% static "plugins/json-view/jquery.jsonview.min.css" %}">
<link rel="stylesheet" href="{% static "plugins/bootstrap-dialog/css/bootstrap-dialog.css" %}">
<!--video.js-->
<link rel="stylesheet" href="{% static "plugins/video.js/video-js.min.css"  %}" >
<style>
   .play-dialog .modal-dialog {
        width: 58%;
    }
    .large-dialog .modal-dialog {
        width: 1100px;
        height: auto;
    }
    #playermodal .modal-dialog {
        width: 60%;
        height: auto;
    }
</style>
{% endblock %}
{% block content %}
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <!-- BEGIN EXAMPLE TABLE PORTLET-->
            <div class="box box-success">
                <div class="box-header with-border">

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                        <div class="btn-group">
                            <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-wrench"></i></button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">{% trans 'Action' %}</a></li>
                                <li><a href="#">{% trans 'Another action' %}</a></li>
                                <li><a href="#">{% trans 'Something else here' %}</a></li>
                                <li class="divider"></li>
                                <li><a href="#">{% trans 'Separated link' %}</a></li>
                            </ul>
                        </div>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <table id="sshlogslist" class="table table-hover table-striped">
                        <thead>
                        <tr>
                            <th>{%trans 'user name' %}</th>
                            <th>{%trans 'server name' %}</th>
                            <th>{%trans 'server ip' %}</th>
                            <th>{%trans 'start time' %}</th>
                            <th>{%trans 'is finished' %}</th>
                            <th>{%trans 'action' %}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for element in object_list %}
                        <tr>
                            <td>{{ element.user.username }}</td>
                            <td>{{ element.server.name }}</td>
                            <td>{{ element.server.ip }}</td>
                            <td>{{ element.start_time}}</td>
                            <td>{{ element.is_finished }}</td>
                            <td data-editable="false" class="text-center pull-left">
                                {% if element.is_finished %}
                                {% if perms.common.can_play_log %}
                                    {% if element.commercial_version %}
                                    <a class="btn btn-xs btn-primary play" onclick="playauditvideo('{{element.user.username}}','{{element.server.ip}}','{{element.start_time}}','{{element.end_time}}','{{element.channel}}');">{%trans 'replay' %}</a>
                                    {% else %}
                                    <a class="btn btn-xs btn-primary play" onclick="play('{{element.user.username}}','{{element.server.ip}}','{{element.start_time}}','{{element.end_time}}',{% if element.server.credential.protocol == 'ssh-password' or element.server.credential.protocol == 'ssh-key' %} '{% url 'sshlogplay' element.id %}' {% else %} '{% url 'guacamolelogplay' element.id %}' {% endif %} );">{%trans 'replay' %}</a>
                                {% endif %}
                                {% endif %}
                                {% else %}
                                {% if perms.common.can_kill_serverinfo %}
                                    {% if element.server.credential.protocol == 'ssh-password' or element.server.credential.protocol == 'ssh-key' %}<a class="btn btn-xs btn-danger" onclick="kill('{{element.channel}}','{{element.user.username}}')">{%trans 'kill' %}</a>{% else %} <a class="btn btn-xs btn-danger" onclick="killguacamole('{{element.id}}','{{element.user.username}}')">{%trans 'kill' %}</a>{% endif %}
                                {% endif %}
                                {% if perms.common.can_monitor_serverinfo %}
                                {% if element.server.credential.protocol == 'ssh-password' or element.server.credential.protocol == 'ssh-key' %}<a class="btn btn-xs btn-success" onclick="monitor('{{element.user.username}}','{{element.server.ip}}','{{element.start_time}}','{% url 'sshterminalmonitor' element.id %}',)">{% else %}<a class="btn btn-xs btn-success" onclick="monitorguacamole('{{element.user.username}}','{{element.server.ip}}','{{element.start_time}}','{% url 'guacamolemonitor' element.id %}',)">{% endif %}{%trans 'monitor' %}</a>
                                {% endif %}
                                {% endif %}
                                {% if perms.common.can_view_command_log %}
                                {% if element.server.credential.protocol == 'ssh-password' or element.server.credential.protocol == 'ssh-key' %}<a class="btn btn-xs btn-warning" onclick="get_commands_detail('{{element.id}}')">{%trans 'commands' %}</a>{% endif %}
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- END EXAMPLE TABLE PORTLET-->
        </div>

    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="modal fade" id="playermodal" tabindex="-1" role="dialog" aria-labelledby="playermodal" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="modalclosebutton">
                                &times;
                            </button>
                            <h4 class="modal-title" id="playermodaltitle">
                            </h4>
                        </div>
                        <div class="modal-body">
                            <video
                                    id="auditlogplay"
                                    class="video-js"
                                    controls
                                    preload="auto"
                                    poster="//vjs.zencdn.net/v/oceans.png"
                                    data-setup='{}' style="width: 100%">
                                <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
                                <p class="vjs-no-js">
                                    To view this video please enable JavaScript, and consider upgrading to a
                                    web browser that
                                    <a href="https://videojs.com/html5-video-support/" target="_blank">
                                        supports HTML5 video
                                    </a>
                                </p>
                            </video>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
        </div>
    </div>
    </div>
</section>
{% endblock %}
{% block js %}
<script src="{% static 'plugins/markdown/markdown.js' %} "></script>
<script src="{% static 'plugins/bootstrap-select/js/bootstrap-select.js' %} "></script>
<script src="{% static 'plugins/bootstrap-select/js/i18n/defaults-en_US.js' %} "></script>
<script src="{% static 'plugins/json-forms/js/brutusin-json-forms.js' %} "></script>
<script src="{% static 'plugins/json-forms/js//brutusin-json-forms-bootstrap.js' %} "></script>
<!-- DataTables -->
<script src="{% static "plugins/datatables/jquery.dataTables.min.js" %}"></script>
<script src="{% static "plugins/datatables/dataTables.bootstrap.min.js" %}"></script>
<script src="{% static "plugins/json-view/jquery.jsonview.min.js" %}"></script>
<script src="{% static "plugins/bootstrap-dialog/js/bootstrap-dialog.js" %}"></script>
<script src="{% static "plugins/bootbox/bootbox.js" %}"></script>
<!--video.js-->
<script src="{% static "plugins/video.js/video.min.js" %}"></script>

<script type="application/javascript">
    $(function () {
        $('#sshlogslist').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": true,
            "ordering": true,
            "info": true,
            "iDisplayLength": 50,
            "autoWidth": false,
        });
    });

    function play(user,ip,start_time,end_time,url){
        var div_username = ' {% trans 'user' %}: '+'<span class="text-info">'+user+'' + '</span>';
        var div_ip = ' {% trans 'server' %}: '+'<span class="text-info">' + ip + '</span>';
        var div_time = ' {% trans 'start time' %}: ' + '<span class="text-info">'+start_time +'</span>' + ' {% trans 'end time' %}: ' +'<span class="text-info">' + end_time + '</span>';
        var title = div_username + div_ip + div_time;
        if (url.indexOf("guacamole") >= 0){
            var size=BootstrapDialog.SIZE_WIDE;
            var cssclass='play-dialog';
        }else{
            var size=BootstrapDialog.SIZE_NORMAL;
            var cssclass='primary-default';
        };
        BootstrapDialog.show({
            title: title,
            type: BootstrapDialog.TYPE_DEFAULT,
            message:$('<div style="overflow: auto;background-color: rgba(0, 0, 0, 0);"></div>').load(url),
            size:size,
            draggable: true,
            cssClass: cssclass,
        });
        return false;
    }
        
function kill(channel_name,user_name) {
    var dialog = bootbox.confirm({
        title: "<a class='text-danger'>"+'{% trans 'kick user' %} ' + user_name +" {% trans 'out' %} </a>",
        message: '{% trans 'Are you sure to kick user' %} ' + user_name +' {% trans 'out' %} ?',
        buttons: {
            confirm: {
                label: '{% trans 'kill' %}',
                className: 'btn-danger'
            },
            cancel: {
                label: '{% trans 'cancel' %}',
                className: 'btn-success'
            }
        },
        callback: function (result) {
            if (result){
                $.ajax({
                    type: "POST",
                    url: '{% url 'sshterminalkill' %}',
                    dataType: "json",
                    data: {'channel_name':channel_name},
                    success: function (data) {
                    
                        if (data['status']){
                            toastr["success"](data['message']);
                            setTimeout(function () {
                                location.reload();
                            },2000);
                        }else{
                            toastr["error"](data['message']);
                        }
                        
                    },
                    failure: function (errMsg) {
                        toastr["error"](errMsg);
                    },
                });
            }
        }
    });
}


function monitor(user,ip,start_time,url){
        var div_username = ' {% trans 'user' %}: '+'<span class="text-info">'+user+'' + '</span>';
        var div_ip = ' {% trans 'server' %}: '+'<span class="text-info">' + ip + '</span>';
        var div_time = ' {% trans 'start time' %}: ' + '<span class="text-info">'+start_time +'</span>';
        var title = div_username + div_ip + div_time;
        BootstrapDialog.show({
            size: BootstrapDialog.SIZE_WIDE,
            title: title,
            type: BootstrapDialog.TYPE_DEFAULT,
            message:$('<div style="overflow: auto;background-color: rgba(0, 0, 0, 0);"></div>').load(url),
            draggable: true
        });
        return false;
    }


function monitorguacamole(user,ip,start_time,url){
        var div_username = ' {% trans 'user' %}: '+'<span class="text-info">'+user+'' + '</span>';
        var div_ip = ' {% trans 'server' %}: '+'<span class="text-info">' + ip + '</span>';
        var div_time = ' {% trans 'start time' %}: ' + '<span class="text-info">'+start_time +'</span>';
        var title = div_username + div_ip + div_time;
        BootstrapDialog.show({
            size: BootstrapDialog.SIZE_WIDE,
            title: title,
            cssClass: 'large-dialog',
            type: BootstrapDialog.TYPE_DEFAULT,
            message:$('<iframe src="' + url +'" frameborder="0" scrolling="no" onload="this.height=780;this.width=1030;this.contentWindow.focus();" onmouseover="this.contentWindow.focus();"></iframe>'),
            draggable: true
        });
        return false;
    }

function killguacamole(id,user_name) {
    var dialog = bootbox.confirm({
        title: "<a class='text-danger'>"+'{% trans 'kick user' %} ' + user_name +" {% trans 'out' %} </a>",
        message: '{% trans 'Are you sure to kick user' %} ' + user_name +' {% trans 'out' %} ?',
        buttons: {
            confirm: {
                label: '{% trans 'kill' %}',
                className: 'btn-danger'
            },
            cancel: {
                label: '{% trans 'cancel' %}',
                className: 'btn-success'
            }
        },
        callback: function (result) {
            if (result){
                $.ajax({
                    type: "POST",
                    url: '{% url 'guacamolekill' %}',
                    dataType: "json",
                    data: {'id':id},
                    success: function (data) {

                        if (data['status']){
                            toastr["success"](data['message']);
                            setTimeout(function () {
                                location.reload();
                            },2000);
                        }else{
                            toastr["error"](data['message']);
                        }

                    },
                    failure: function (errMsg) {
                        toastr["error"](errMsg);
                    },
                });
            }
        }
    });
}
function get_commands_detail(id) {
    $.ajax({
        url: '{% url 'commandsloglist' %}',
        type: 'POST',
        data: {'id':id},
        success: function(data, textStatus, jqXHR) {
            if(data.status){
                var dialog = bootbox.dialog({
                    title: '{%trans 'commands detail' %}',
                    message: '<p><i class="fa fa-spin fa-spinner"></i> {%trans 'Loading...' %}</p>'
                });
                dialog.find('.modal-body').css("height","300px").css("overflow-y","scroll").css("font-size","16px");
                var html = "";
                var data = data.message;
                for ( var i=0; i<data.length; i++ ) {
                    html += data[i].datetime + " :  " + data[i].command  +"</br>"
                }
                dialog.find('.bootbox-body').html(html);
            } else {
                toastr['error'](data.message);
            }
        },
        error: function(data, textStatus, jqXHR) {
            toastr['error'](data);
        }
    });
}
function playauditvideo(user,ip,start_time,end_time,logid) {
    var div_username = ' {% trans 'user' %}: '+'<span class="text-info">'+user+'' + '</span>';
    var div_ip = ' {% trans 'server' %}: '+'<span class="text-info">' + ip + '</span>';
    var div_time = ' {% trans 'start time' %}: ' + '<span class="text-info">'+start_time +'</span>' + ' {% trans 'end time' %}: ' +'<span class="text-info">' + end_time + '</span>';
    var title = div_username + div_ip + div_time;
    $('#playermodal').modal({backdrop: 'static', keyboard: false});
    $('#playermodal').modal('show');
    $("#playermodaltitle").empty().append(title);
    video_path = window.location.origin + '/media/' + logid + '-000000'

    var player = videojs('auditlogplay');
    player.poster(video_path + '.png')
    player.src({ type: "video/mp4", src: video_path + '.mp4' });
    //api documents https://docs.videojs.com/docs/api/player.html

    player.ready(function () {
        player.play()
    });
    // player.on('ended',function () {
    //     console.log('ended')
    // })
    $("#modalclosebutton").on('click',function () {
        player.pause()
    })
}
</script>
{% endblock %}